import React from "react";
import { Text, TextInput, TouchableOpacity, View } from "react-native";

/**
 * 注册页面
 */
const RegisterView = ({ navigation }) => {

    React.useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: false,            
            headerStyle: {                
                // backgroundColor: '#01246E',
                //marginTop: 10,
            },
            headerRight: () => {

            }
        });
    }, [navigation]);


    return (
        <View>
            <Text style={{
                marginTop: 100,
                alignSelf: 'center',
                color: "#FF8E32",
                fontSize: 35,
                fontWeight: '400',
            }}>{"注册账号"}</Text>

            <TextInput
                style={{
                    marginTop: 58,
                    marginHorizontal: 25,
                    height: 56,
                    // backgroundColor: '#A7A9B2',
                    borderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#A7A9B2',
                    paddingLeft: 20,
                    fontSize: 14,
                    fontWeight: '400',
                }}
                placeholder={"请输入用户名"}
            ></TextInput>

            <TextInput
                style={{
                    marginTop: 24,
                    marginHorizontal: 25,
                    height: 56,
                    // backgroundColor: '#A7A9B2',
                    borderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#A7A9B2',
                    paddingLeft: 20,
                    fontSize: 14,
                    fontWeight: '400',
                }}
                placeholder={"请输入密码"}
            ></TextInput>

            <TextInput
                style={{
                    marginTop: 24,
                    marginHorizontal: 25,
                    height: 56,
                    // backgroundColor: '#A7A9B2',
                    borderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#A7A9B2',
                    paddingLeft: 20,
                    fontSize: 14,
                    fontWeight: '400',
                }}
                placeholder={"请确认密码"}
            ></TextInput>

            <TouchableOpacity
                style={{
                    marginTop: 18,
                    marginHorizontal: 25,
                    backgroundColor: '#FF8E32',
                    borderRadius: 5,
                }}
            >
                <Text
                    style={{
                        alignSelf: 'center',
                        marginVertical: 16,
                        color: '#FFFFFF',
                        fontSize: 16,
                        fontWeight: '400',
                        lineHeight: 24,
                    }}
                >{"登录"}</Text>
            </TouchableOpacity>

            <View
                style={{
                    marginTop: 33,
                    alignItems: 'center',
                }}
            >
                <Text
                    style={{
                        alignItems: 'center',
                        color: '#000000',
                        fontSize: 16,
                        fontFamily: '400',
                        lineHeight: 18.75,
                    }}
                >
                    {"已有账号?"}
                    <TouchableOpacity
                        style={{
                            alignItems: 'center',
                        }}
                        onPress={(e) => {
                            navigation.navigate("RegisterView")
                        }}
                    >
                        <Text
                            style={{
                                alignSelf: 'center',
                                color: '#FF8E32',
                                fontSize: 16,
                                fontFamily: '400',
                                lineHeight: 18.75,
                            }}
                        >{"立即登录"}</Text>
                    </TouchableOpacity>
                </Text>
            </View>
        </View>
    )
}

export default RegisterView;